<template>
  <div>
    <el-card class="box-card" style="margin: 20px;">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="班级编码">
          <el-input v-model="formInline.class_info" placeholder="请输入班级编码" />
        </el-form-item>
        <el-form-item label="年份">
          <el-select v-model="formInline.year" placeholder="请选择年份">
            <el-option v-for="year in years" :key="year" :label="year + '年'" :value="year" />
          </el-select>
        </el-form-item>
        <el-form-item label="学期">
          <el-select v-model="formInline.semester" placeholder="请选择学期">
            <el-option label="春" value="春" />
            <el-option label="暑" value="暑" />
            <el-option label="秋" value="秋" />
            <el-option label="寒" value="寒" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getData()">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" style="margin: 20px;">
      <el-table
        :data="tableData"
        :row-class-name="tableRowClassName"
        style="width: 100%"
      >
        <el-table-column
          prop="year"
          label="年份"
          width="100"
        />
        <el-table-column
          prop="semester"
          label="学期"
          width="100"
        />
        <el-table-column
          prop="class_code"
          label="班级编码"
          width="150"
        />
        <el-table-column
          prop="class_name"
          label="班级名称"
        />
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button v-show="false" type="text" size="small">预览</el-button>
            <el-button type="text" size="small" @click="handleClick(scope.row.roomId)">复制回放地址</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: '',
  data() {
    return {
      years: [2020, 2021, 2022, 2023, 2024, 2025, 2026, 2027, 2028, 2029, 2030],
      formInline: {
        year: '',
        semester: '',
        class_info: ''
      },
      tableData: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    handleClick(value) {
      navigator.clipboard.writeText('https://t.aixuexi.com/t/vmqUFnaa')
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex % 2) !== 0) {
        return 'warning-row'
      } else {
        return ''
      }
    },
    async getData() {
      const { year, semester, class_info } = this.formInline
      const data = await axios.get(`https://teachapi.aixuexi.com/live/test/bx/course/detail?year=${year}&semester=${semester}&class_info=${class_info}`)
      this.tableData = data.data.data
    }
  }
}
</script>
  <style>
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
  </style>
